<template>
    <div class="wallet">
        <header>
            <h1>總資產估計：<span class='text-color'>{{quantity}}</span> <em>≈{{total_money}}CNY</em></h1>
            <p>場外資產估計：{{quantity}}BTC</p>
        </header>
        <el-table  
            :data='table'
            :header-cell-style="{background : '#E5F2FF'}"
		    ref='table'>
            <el-table-column label='' type="expand">
                <template slot-scope="scope">
                    <div class="c-b s-b" v-if='scope.row.handleType == 0'>
                        <div class="left">
                            <h1>充幣</h1>
                            <h2>充幣地址：</h2>
                            <p>{{scope.row.address}}</p>
                        </div>
                        <div class="right">
                            <h1>溫馨提示</h1>
                            <h1>·最小充幣數量：0.00001BTC</h1>
                            <h1>·充值需要1個網絡確認才能到賬</h1>
                            <h1>·請勿向上述地址重置任何非BTC資源，否則資產將不可找回。</h1>
                        </div>
                    </div>
                    <div class="t-b s-b" v-else>
                        <div>
                            <h1>提幣</h1>
                            <el-form size='mini' class="tb-form" :model="formData" :rules='rules' ref='tbForm'>
                                <el-form-item label='提現地址' prop='a'>
                                    <el-input placeholder="請輸入提現地址" v-model="formData.address"></el-input>
                                </el-form-item>
                                <el-form-item label='幣種數量'  prop='b'>
                                    <el-input  placeholder="請輸入提幣數量" v-model="formData.number" type="number" ></el-input>
                                </el-form-item>
                                <el-form-item label='支付密碼' prop='c'>
                                    <el-input  placeholder="請輸入支付密碼" v-model="formData.password" type='password'></el-input>
                                </el-form-item>
                                <!-- <el-form-item label='备注'>
                                    <el-input  placeholder="请输入提现备注" v-model="formData.d"></el-input>
                                </el-form-item> -->
                                <el-form-item >
                                    <el-button type='primary' @click='confirmTB'>確認提現</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="right">
                            <h1>温馨提示</h1>
                            <h1>·最小提幣數量：0.0003 BTC</h1>
                            <h1>·BTC網絡轉帳費：0.0005 BTC，為保障轉帳速度，網絡轉帳費會根據情况實时進行調整。</h1>
                            <h1>·平臺內相互轉帳是實时到賬的，超出免費轉帳額度將收取和網絡轉帳同等的手續費。</h1>
                        </div>
                    </div>
                    
                </template>
            </el-table-column>
            <el-table-column label='幣種' prop='code'></el-table-column>
            <el-table-column label='可用' prop='remain_number'></el-table-column>      
            <el-table-column label='凍結' prop='frozen_number'></el-table-column>
            
            <el-table-column label='操作' prop=''>
                <template slot-scope="scope">
                    <el-button type='text' @click='goCB(scope.row, 0)'>充幣</el-button>    
                    <el-button type='text' @click='goCB(scope.row, 1)'>提幣</el-button>    
                    <el-button type='text' @click='$router.push(`/acount-detail`)'>帳戶明細</el-button>    
                    <el-button type='text' @click='$router.push(`/buy-bitcoin`)'>去交易</el-button>    
                </template>    
            </el-table-column>       
        </el-table>
    </div>
</template>

<script>

    import {GetUserWallet, B2Money} from '@/api/user'

    export default {
        data () {
            return {
                table : null,
                formData :{
                    coin_id : null,
                    address : null,
                    number : null,
                    password : null
                },
                rules : {
                    address : [{required :true, message :'请输入提现地址'}],
                    number : [{required :true, message :'请输入提币数量'}],
                    password : [{required :true, message :'请输入支付密码'}],
                },
                quantity : 0,
                total_money : 0
            }
        },
        mounted () {
            this.getWalletData()

        },
        methods :{
            goCB (row, flag) {

                row.handleType = flag;

                this.table.map(item => {
                    if (item.id == row.id) {
                        this.$refs.table.toggleRowExpansion(row, true);
                    } else {
                        this.$refs.table.toggleRowExpansion(item, false);
                    }
                })


                //先充值formData，防止有残留数据
                this.formData = {
                    coin_id : null,
                    address : null,
                    number : null,
                    password : null
                }
                //赋值coin_id
                this.formData.coin_id = row.coin_id;
                
                
            },
            getWalletData () {
                return new Promise((resolve, reject) => {
                    GetUserWallet().then(res => {
                        this.quantity = res.result.quantity;
                        this.total_money = res.result.total_money;
                        if (res.result.address_list && res.result.address_list.length) {
                            this.table = res.result.address_list.map(item =>{
                                item.handleType = 0;
                                return item;
                            })
                        }
                        resolve()
                    })
                })
                
            },

            confirmTB (){
                // console.log(this.formData.coin_id)
                B2Money(this.formData).then(res => {
                    this.$alert('提币成功', '提示', {
                        callBack : _ => {
                            this.getWalletData();
                            this.formData = {
                                coin_id : null,
                                address : null,
                                number : null,
                                password : null
                            }
                        }
                    })
                })
            }
        }
    }
</script>

<style lang='less' scoped>
    .wallet {
        width: 1200px;
        margin: 15px auto;
        header {
            padding: 60px 30px;
            background: #fff;
            margin-bottom: 30px;
            h1 {
                margin-bottom: 20px;
                font-size: 20px;
                span {
                    font-size: 32px;
                }
                em {
                    font-size:20px;
                }
            }
            p {
                color: #a5a5a5;
                font-size: 16px;
            }
        }
        .c-b {
            width: 1000px;
            .left {
                h1 {
                    font-size: 24px;
                    margin-bottom: 20px;
                }
                h2 {
                    font-size: 20px;
                    margin-bottom: 8px;
                    // padding: 0;
                }
                p {
                    font-size: 22px;
                    font-weight: bold;
                }
            }
            .right {
                font-size: 16px;
                color: #a5a5a5;
                h1 {
                    margin-bottom: 8px;
                }
            }
        }
        .t-b {
            .tb-form {
                width: 300px;
            }
            .right {
                font-size: 16px;
                color: #a5a5a5;
                h1 {
                    margin-bottom: 8px;
                }
            }
        }
    }
</style>